<template>
  <div class="examinationWrap">
  <div class="pageTableInner">
    <div class="infoSearchWrap">
      <div class="infoSearchOne">
        <el-row :gutter="20">
          <el-col :span="6">
              <div class="searchWrap">
                <el-row :gutter="40">
                  <el-col :span="8">
                   <span class="searchFont">历史考核结果：</span>
                  </el-col>
                  <el-col :span="16">
                    <el-select v-model="searchElectricInfo.vehicleNo" size="mini" clearable placeholder="全部">
                      <el-option
                        v-for="item in options1"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </el-col>
                </el-row>
              </div>
          </el-col>
          <el-col :span="7">
              <div class="searchWrap">
                <el-row :gutter="20">
                  <el-col :xs="12" :sm="10" :md="3" :lg="3">
                   <span class="searchFont">图表：</span>
                  </el-col>
                  <el-col :xs="12" :sm="14" :md="21" :lg="21">
                    <el-select v-model="searchElectricInfo.labelStatus" size="mini" clearable placeholder="全部">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </el-col>
                </el-row>
            </div>
          </el-col>
          <div style="float: right;margin-right: 10px;">
            <el-button type="primary" size="mini" @click="searchEleInfo()">查询</el-button>
            <span style="margin: 0 10px;">
              <router-link to="/examinationResults/examinOpinions"><el-button type="primary" size="mini" @click="searchEleInfo()">初步考核结果（征求意见）</el-button></router-link>
            </span>

            <el-button type="primary" size="mini" @click="searchEleInfo()">导出</el-button>
            <affixBtn></affixBtn>
          </div>
        </el-row>
      </div>

    </div>
    <!--<div class="echartsWrap">
      <ridingCountEcharts :perHourData="perHourData1" :allCompanyNames="allCompanyNames" :perHour="perHour" :titleEcharts="titleEcharts1"></ridingCountEcharts>
    </div>-->

    <div class="tableContainer">
      <div class="tableInner" ref="tableInner">
        <el-table
          ref="multipleTable"
          :data="rows"
          stripe
          show-summary
          :summary-method="getSummaries"
          :height="tableHeight"
          :span-method="objectSpanMethod"
          tooltip-effect="dark"
          style="width: 100%"
        >
          <el-table-column
            label="指标类别"
            prop="a"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            prop="b"
            label="类别分值"
            width="125"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="c"
            label="指标项"
          >
          </el-table-column>
          <el-table-column
            prop="d"
            label="指标项权重"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            label="摩拜"
            prop="e"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <div style="cursor: pointer;"  @click="$refs.detailDialog.dialogOpen(1)">{{scope.row.e}}</div>
            </template>
          </el-table-column>
          <el-table-column
            label="OFO"
            prop="f"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <div style="cursor: pointer;"  @click="$refs.detailDialog.dialogOpen(2)">{{scope.row.f}}</div>
            </template>
          </el-table-column>
          <el-table-column
            label="赳赳"
            prop="g"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <div style="cursor: pointer;"  @click="$refs.detailDialog.dialogOpen(3)">{{scope.row.g}}</div>
            </template>
          </el-table-column>
          <el-table-column
            label="一步"
            prop="h"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <div style="cursor: pointer;"  @click="$refs.detailDialog.dialogOpen(1)">{{scope.row.h}}</div>
            </template>
          </el-table-column>
          <el-table-column
            label="UBIKE"
            prop="i"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <div style="cursor: pointer;"  @click="$refs.detailDialog.dialogOpen(1)">{{scope.row.i}}</div>
            </template>
          </el-table-column>
        </el-table>

      </div>
    </div>
  </div>
    <detailDialog ref="detailDialog"></detailDialog>
    <router-view  ></router-view>
  </div>
</template>

<script>


  import ridingCountEcharts from './ridingCountEcharts.vue';
  import detailDialog from './detailDialog.vue';
  import affixBtn from './affixBtn.vue';
  export default {
    props: ["allCompanies"],
    data(){
      return {
        perHourData1:[[85,83,82,60 ,75,89,92],[68,65,63,75,79,82,80],[8564,7824,7648,8594,7569,8512,6879],[5564,5824,6648,5594,4569,7512,5879],[9564,9824,11648,11594,10569,12512,11879]],
        allCompanyNames:['摩拜','OFO'],
        perHour:["第一季度","第二季度","第三季度","第四季度"],
        titleEcharts1:["各企业历史考核分数变化趋势图","分数(分)"],

        options: [{
          value: '1',
          label: '本期考核各企业各指标评分对比图'
        }, {
          value: '2',
          label: '各企业历史考核分数变化趋势'
        }],
        options1: [{
          value: '1',
          label: '2019年第一季度'
        }, {
          value: '2',
          label: '2018年第四季度'
        }, {
          value: '3',
          label: '2018年第三季度'
        }],
        rows: [
          {a:"运营服务",b:"15",c:"日均骑行量",d:"3",e:"2.5",f:"2.1",g:"0",h:"0",i:"0",j:"2小时",},
          {a:"运营服务",b:"15",c:"车辆周转率",d:"5",e:"4.3",f:"3.6",g:"0",h:"0",i:"0",j:"2小时",},
          {a:"运营服务",b:"15",c:"用户保险购买",d:"2",e:"1.8",f:"1.6",g:"0",h:"0",i:"0",j:"2小时",},
          {a:"运营服务",b:"15",c:"维保场地规模",d:"5",e:"4.1",f:"3.9",g:"0",h:"0",i:"0",j:"2小时",},

          {a:"运营管理",b:"35",c:"信息公开",d:"3",e:"2.6",f:"2.7",g:"0",h:"0",i:"0",j:"2小时",},
          {a:"运营管理",b:"35",c:"车辆完好率",d:"10",e:"8.9",f:"6.3",g:0,h:0,i:"0",j:"2小时",},
          {a:"运营管理",b:"35",c:"热点区域车辆管理",d:"6",e:"5.1",f:"4.9",g:0,h:0,i:"0",j:"2小时",},
          {a:"运营管理",b:"35",c:"车辆日常秩序管理",d:"8",e:"7.1",f:"6.8",g:0,h:0,i:"0",j:"2小时",},
          {a:"运营管理",b:"35",c:"暂扣车辆处置及时性",d:"4",e:"3.6",f:"3.1",g:0,h:0,i:"0",j:"2小时",},
          {a:"运营管理",b:"35",c:"用户信用体系建设",d:"4",e:"3.2",f:"2.9",g:0,h:0,i:"0",j:"2小时",},

          {a:"安全应急",b:"5",c:"应急事件响应",d:"5",e:"4.6",f:"4.1",g:0,h:0,i:"0",j:"2小时",},

          {a:"创新管理",b:"5",c:"企业自主创新",d:"3",e:"2.8",f:"2.2",g:0,h:0,i:"0",j:"2小时",},
          {a:"创新管理",b:"5",c:"数据接入",d:"2",e:"1.8",f:"1.7",g:0,h:0,i:"0",j:"2小时",},

          {a:"公众评价",b:"40",c:"公众满意度",d:"30",e:"27",f:"21",g:0,h:0,i:"0",j:"2小时",},
          {a:"公众评价",b:"40",c:"专项检查",d:"10",e:"8.6",f:"6.3",g:0,h:0,i:"0",j:"2小时",},

        ],
        multipleSelection: [],
        dialogFormVisible:false,
        checkAll: false,
        isCheckAll: false,
        currentRow: null,
        pageSize: 10,
        count: 1468,
        loading: true,
        currentPage: 1,
        pickerOptions2: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        ruleFormEdit:{
          enterpriseId:"",
          labelId:""
        },
        //以下为搜索
        labelChecked: "",
        value6: "",
        tableHeight:400,
        spanArr:[],
        searchElectricInfo: {
          labelNo: "",
          enterpriseId: "",
          vehicleNo: "1",
          labelStatus: "1",
          beginTime: "",
          endTime: "",
          sortType: "",
          asc: "true"
        },
      }
    },
    components: {ridingCountEcharts,detailDialog,affixBtn},
    created(){
      this.getElectricInfo()

    },
    mounted(){
      this.$nextTick(()=>{
        //表格滚动
        this.tableHeight=document.querySelector(".examinationWrap").clientHeight-125
      })
    },

    methods: {
      objectSpanMethod({ row, column, rowIndex, columnIndex }) {

        if (columnIndex === 0||columnIndex === 1) {

          const _row = this.spanArr[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col
          };
        }
      },
      getSummaries(param) {
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '';
            return;
          }else if(index === 1){
            sums[index] = '考核成绩';
            return;
          }
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            sums[index] +=" 分"
          } else {
//            sums[index] = 'N/A';
            sums[index] = '';
          }
        });

        return sums;
      },
      //排序
      sortChange(a) {
        if (a.column) {
          if (a.column.label == "电子标签") {
            this.searchElectricInfo.asc = !this.searchElectricInfo.asc
            this.searchElectricInfo.sortType = "labelNo"
            this.getElectricInfo()
          }else if(a.column.label == "车辆编号") {
            this.searchElectricInfo.asc = !this.searchElectricInfo.asc
            this.searchElectricInfo.sortType = "vehicleNo"
            this.getElectricInfo()
          }else {
            this.searchElectricInfo.sortType = a.prop
            this.getElectricInfo()
          }
        } else {
          this.searchElectricInfo.asc = "true", this.searchElectricInfo.sortType = ""
        }
      },
      handleEdit(index, row, key){
        this.ruleFormEdit.labelId=row.id
        if (key == 0) {  //分配
          this.dialogFormVisible=true
        } else if (key == 1) { //激活
          this.$confirm('确定激活标签号为 '+row.labelNo+' 电子标签', '确认激活', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.activateLabe()
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消激活'
            });
          });
        } else if (key == 2) { //作废
          this.$confirm('确定作废标签号为 '+row.labelNo+' 电子标签', '确认激活', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this. cancellationLabel()
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消作废'
            });
          });
        }
      },
      //作废标签
      cancellationLabel(){
        this.axios.post( process.env.API_HOST +'/ulinkLabel/delete', JSON.stringify({
          labelId:this.ruleFormEdit.labelId,
        }))
          .then(response=>{
            if(response.data.state===0){
              this.$message({
                type: 'success',
                message: '操作成功!'
              });
              this.getElectricInfo()
            }
          })
          .catch(error=>{
            console.log(error);
          });
      },      //激活标签
      activateLabe(){
        this.axios.post( process.env.API_HOST +'/ulinkLabel/active', JSON.stringify({
          labelId:this.ruleFormEdit.labelId,
        }))
          .then(response=>{
            if(response.data.state===0){
              this.$message({
                type: 'success',
                message: '操作成功!'
              });
              this.getElectricInfo()
            }
          })
          .catch(error=>{
            console.log(error);
          });
      },
      //提交分配
      submitFormEdit(){
        this.axios.post( process.env.API_HOST +'/ulinkLabel/allot', JSON.stringify({
          enterpriseId:this.ruleFormEdit.enterpriseId,
          labelId:this.ruleFormEdit.labelId,
        }))
          .then(response=>{
            if(response.data.state===0){
              this.$message({
                type: 'success',
                message: '操作成功!'
              });
              this.getElectricInfo()
              this.dialogFormVisible=false
            }
          })
          .catch(error=>{
            console.log(error);
          });
      },
      //重置
      resetForm() {
        this.ruleFormEdit.enterpriseId = ""
      },
      //全选
      changeFun(val) {
        this.multipleSelection = val
        this.checkAll = this.rows.length == val.length
      },
      toggleSelection(rows) {
        this.isCheckAll=!this.isCheckAll
        if (rows&&this.isCheckAll) {
          this.$refs.multipleTable.clearSelection();
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      //搜索
      searchEleInfo(){
        if (this.value6[0] != null) {
          this.searchElectricInfo.beginTime = this.dtime(this.value6[0]).format('YYYY-MM-DD 00:00:00')
          this.searchElectricInfo.endTime = this.dtime(this.value6[1]).format('YYYY-MM-DD 24:00:00')

        } else if (this.value6[0] === null) {
          this.searchElectricInfo.beginTime = ""
          this.searchElectricInfo.endTime = ""
        }
        this.getElectricInfo()

      },
      //重置
      resetInfo(){
        this.searchElectricInfo.labelNo = ""
        this.searchElectricInfo.enterpriseId = ""
        this.searchElectricInfo.vehicleNo = ""
        this.searchElectricInfo.labelStatus = ""
        this.searchElectricInfo.beginTime = "";
        this.searchElectricInfo.endTime = ""
        this.value6 = ""
        this.getElectricInfo()
      },
      handleSizeChange(val) {
        this.pageSize = val
        this.getElectricInfo()
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.getElectricInfo()

      },

      //导出
      handleChecked(key){
        let arr=[]
        this.multipleSelection.forEach((item)=>{
          arr.push(item.id)
        })
        this.ruleFormEdit.labelId=arr.join(",")
        if(this.ruleFormEdit.labelId==""){
          this.$message({
            type: 'warning',
            message: '请先勾选需要操作的标签!'
          });
          return;
        }
        if(key==0){//导出
          this.exportElectricInfo()
        }else if(key==1){//激活
          this.activateLabe()
        }else if(key==2){//分配
          this.dialogFormVisible=true
        }else if(key==3){//作废
          this.cancellationLabel()
        }

      },
      //批量导出
      exportElectricInfo(){
        this.axios.post(process.env.API_HOST + `/ulinkLabel/export`, {labelId: this.ruleFormEdit.labelId})
          .then(response => {
            if(response.data.state==1) {
              this.$message({
                type: 'success',
                message: "导出成功"
              });
              window.location.href=url
            }
          })
      },
      //全部导出
      exportElectricInfoAll(){

        this.axios.post(process.env.API_HOST + `/ulinkLabel/batchExport`, {
          labelNo: this.searchElectricInfo.labelNo,
          enterpriseId: this.searchElectricInfo.enterpriseId,
          labelStatus: this.searchElectricInfo.labelStatus,
          beginTime: this.searchElectricInfo.beginTime,
          endTime: this.searchElectricInfo.endTime,
        })
          .then(response => {
            if(response.data.state!=1){
              this.$message({
                type: 'success',
                message: "导出成功"
              });
              window.location.href=url
            }
          })
      },

      //获取所有信息
      getElectricInfo(){
        this.spanArr=this.getSpanArr(this.rows,"classifyName")

        /* let url = process.env.API_HOST + `/ulinkLabel/findAll?page=${this.currentPage}&size=${this.pageSize}&sortType=${this.searchElectricInfo.sortType}&asc=${this.searchElectricInfo.asc}&rangeType=Date&rangeValue=createName&labelNo=${this.searchElectricInfo.labelNo}&enterpriseId=${this.searchElectricInfo.enterpriseId}&labelStatus=${this.searchElectricInfo.labelStatus}&beginTime=${this.searchElectricInfo.beginTime}&endTime=${this.searchElectricInfo.endTime}`
         this.axios.post(url, {withCredentials: true})
         .then(response => {
         const result = response.data
         this.rows = result.data.list
         this.count = result.data.totalCount;
         })*/

      }
    },
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../common/stylus/mixin.styl"
  .examinationWrap
    page()
    .pageTableInner
      border-radius 5px
      height 100%
      .echartsWrap
        height 260px
        padding 20px 20px 0 20px
        border-radius 5px
        background-color white
      .infoSearchWrap
        padding 20px 20px 3px 20px
        overflow hidden
        margin-bottom 10px
        font-size 14px
        background-color white
        border-radius 5px
        .infoSearchOne
          width 100%
          margin-bottom 15px
          .searchWrap
            white-space nowrap
            overflow hidden
            font-size 14px
            line-height 28px
            width 100%
            .searchFont
              margin-left 5px
              font-size 14px
              color #50545D
              font-family SourceHanSansCN-Medium
      .tableContainer
        padding 20px 20px 100px 20px
        background-color white
        border-radius 5px
        margin 0 auto
        .tableInner       //表格滚动
          width 100%
          overflow-y auto
        .el-table td[rowspan="2"]
          border-right: 1px solid #ebeef5;
        .buttonWrapE
          margin-top 150px
          width 100%
          text-align center




</style>
